import React from 'react';
import {AICharacter} from '../types';
import {User} from 'lucide-react';

// 定义组件 Props 的类型
interface CharacterSelectorProps {
    characters: AICharacter[];           // 可选的 AI 角色列表
    selectedCharacter: AICharacter;      // 当前被选中的角色
    onSelect: (character: AICharacter) => void; // 选择角色时的回调
}

// 角色选择器组件：展示可选 AI 角色列表，支持点击切换
export const CharacterSelector: React.FC<CharacterSelectorProps> = ({
                                                                        characters,
                                                                        selectedCharacter,
                                                                        onSelect
                                                                    }) => {
    return (
        // 外层容器：深灰背景、圆角、内边距
        <div className="bg-gray-800 p-4 rounded-lg">
            {/* 标题区域：白色文字 + 图标 */}
            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <User size={20}/>
                AI Character
            </h3>

            {/* 角色列表：单列布局，每项间隔 3 */}
            <div className="grid grid-cols-1 gap-3">
                {characters.map((character) => (
                    <button
                        key={character.id}
                        // 点击按钮时调用 onSelect 传入对应角色
                        onClick={() => onSelect(character)}
                        className={`p-3 rounded-lg text-left transition-all ${
                            // 如果当前角色被选中，高亮为紫色并加阴影
                            selectedCharacter.id === character.id
                                ? 'bg-purple-600 shadow-lg'
                                : 'bg-gray-700 hover:bg-gray-600'
                        }`}
                    >
                        {/* 每个角色按钮内部的布局 */}
                        <div className="flex items-center gap-3">
                            {/* 左侧小圆点，颜色与角色对应 */}
                            <div className={`w-3 h-3 rounded-full ${character.color.replace('text-', 'bg-')}`}/>
                            <div>
                                {/* 角色名称 */}
                                <h4 className="font-semibold text-white">{character.name}</h4>
                                {/* 角色的思考风格描述 */}
                                <p className="text-xs text-gray-300">{character.thinkingStyle}</p>
                            </div>
                        </div>
                    </button>
                ))}
            </div>
        </div>
    );
};
